<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<title>PDF</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/pdfh5.css" />
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>

	<div id="pdf-view"></div>
	<script src="js/pdf.js"></script>
	<script src="js/pdf.worker.js"></script>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/unpkg.com_@dcloudio_uni-webview-js@0.0.3_index.js"></script>
	<script type="text/javascript">
		const pdfUrl = getQueryFile();				// pdf文件
		const pdfType = getQuery('type') || ''; // 类型
		let watermarkText = ''									// 水印内容
		let watermarkCanvas = ""								// 水印canvas图片
		let pdfh5 = null;
		if (pdfType == 'magazine') {
			setWatermarkContent();
		}
		$(function () {
			pdfh5 = new Pdfh5('#pdf-view', {
				pdfurl: pdfUrl,
				scrollEnable: true, //是否允许pdf滚动
				zoomEnable: false, // 是否允许pdf手势缩放
				goto: 1, // 初始到几页
				limit: 0, // 限制pdf加载最大页数
				loadingBar: true, // 是否显示顶部绿色加载进度条
				pageNum: false, // 是否显示左上角页码显示
				backTop: false, // 是否显示右下角回到顶部按钮
				logo: { src: watermarkCanvas, x: 0, y: 0, width: 400, height: 600 },
				URIenable: false, //开启浏览器地址栏file参数获取
				cMapUrl: "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"
			});

			// 监听pdf渲染成功
			pdfh5.on("success", function () {
			})

		})

		function setWatermarkContent() {
			let ele = document.createElement('canvas')
			ele.width = 400
			ele.height = 600
			let objmsg = {
				canvas: ele,
				fontText: watermarkText,
				fontSize: 20,
				fontFamily: 'microsoft yahei',
				fontcolor: 'rgba(117, 135, 153, 0.3)', //字体颜色   默认 #dadbdc
				rotate: 25, //旋转角度   数字类型
				textAlign: 'left' //水印文字居中方式:left center right  默认 left
			}
			createWaterMark(objmsg)
			watermarkCanvas = ele.toDataURL('image/png')
		}

		// 创建canvas水印图片
		function createWaterMark({
			canvas,
			fontText,
			fontFamily = 'microsoft yahei',
			fontSize = 30,
			fontcolor = '#dadbdc',
			rotate = 30,
			textAlign = 'left'
		}) {
			const { height } = canvas
			let ctx = canvas.getContext('2d')
			ctx.font = `${fontSize}px ${fontFamily}`
			ctx.fillStyle = fontcolor
			ctx.textAlign = textAlign
			ctx.textBaseline = 'Middle'

			ctx.restore() // 将canvas恢复到未旋转前的状态
			ctx.save() // 保存未旋转前的状态
			ctx.rotate((-rotate * Math.PI) / 180)
			ctx.fillText(fontText, 100, 200)

			ctx.restore() // 将canvas恢复到未旋转前的状态
			ctx.save() // 保存未旋转前的状态
			ctx.rotate((-rotate * Math.PI) / 180)
			ctx.fillText(fontText, 0, 400)

			ctx.restore() // 将canvas恢复到未旋转前的状态
			ctx.save() // 保存未旋转前的状态
			ctx.rotate((-rotate * Math.PI) / 180)
			ctx.fillText(fontText, -100, 600)

		}

		// 获取file
		function getQueryFile() {
			str = window.location.search.match(/eduline_(\S*)_eduline/)[1];
			return str;
		}

		// 获取地址栏参数
		function getQuery(name) {
			// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
			let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			let r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return r[2];
			}
			return null;
		}
	</script>
</body>

</html>